import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import {Button, IconButton} from '@material-ui/core';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined';
import EditIcon from '@material-ui/icons/Edit';
import style from './Home.module.css';
import {useHistory} from 'react-router-dom';
import {useSelector,useDispatch} from 'react-redux';

const useStyles = makeStyles({
  table: {
    minWidth: 650,
  },
});

function createData(id,name, calories, fat, carbs, protein) {
  return {id, name, calories, fat, carbs, protein };
}

const rows = [
  createData(1,'Frozen yoghurt', 159, 6.0, 1),
  createData(2,'Ice cream sandwich', 237, 9.0, 1),
  createData(3,'Eclair', 262, 16.0, 0),
  createData(4,'Cupcake', 305, 3.7, 0),
  createData(5,'Gingerbread', 356, 16.1, 49),
];

const formatStatus = (status) => {
  if(status === 1) {
    return '已发布';
  }
  return '未发布';
}
export default function Home() {
  const classes = useStyles();
  const history = useHistory();
  const newsDetails = useSelector(state => state.newsDetail);
  console.log(newsDetails);
  return (
    <TableContainer component={Paper}>
      <Table className={classes.table} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Title</TableCell>
            <TableCell align="right">Sub Title</TableCell>
            <TableCell align="right">Count</TableCell>
            <TableCell align="right">Status</TableCell>
            <TableCell align="right">Progress</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow key={row.name}>
              <TableCell component="th" scope="row">
                {row.name}
              </TableCell>
              <TableCell align="right">{row.calories}</TableCell>
              <TableCell align="right">{row.fat}</TableCell>
              <TableCell align="right">{formatStatus(row.carbs)}</TableCell>
              <TableCell className={style.item1} align="right">
                <IconButton onClick={() => {
                  history.push('/home/detail/'+row.id);
                }}><EditIcon /></IconButton>
                <IconButton><DeleteOutlinedIcon style={{color:'red'}} /></IconButton>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  )
}
